<template>
  <div class="person">
    <h1>姓名：{{ a }}</h1>
    <div>
      <ul>
        <li v-for="item in list" :key="item.id">
          {{ item.name }}-{{ item.age }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import {withDefaults } from 'vue';
import { type Persons } from '@/types';
// 接收a
// defineProps(['a', 'list'])

// 接收a和b，同时将props保存起来
// const props = defineProps(['a','b'])
// console.log(props)

// 接受list+限制类型
// defineProps<{
//   list: Persons,
//   a: string
// }>()


// 接受list+限制类型+限制必要性+限制默认值
withDefaults(defineProps<{
  list?: Persons
  a: string
}>(), {
  list: () => [  { id: 'chuan1', name: '默认值', age: 18, sex: '男' },],
  a: '默认值'
})
</script>
<style scoped>
.person {
  background-color: #e7abab;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>